<!--
 * @Description: Lisonglin[2:30 player]
 * @Date: 2021-08-09 15:50:34
 * @LastEditTime: 2021-10-08 20:51:43
 * @FilePath: \web\html\login.html
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登陆界面</title>
<link type="text/css" href="../css/jquery-ui.min.css" rel="stylesheet">
<link type="text/css" href="../css/login.css" rel="stylesheet">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-2.2.3.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<SCRIPT language = "JavaScript">
	function CheckUserName() {    //验证用户名
		var fname = document.myform.username.value;
		var reg = /^[0-9a-zA-Z]/;
		if (fname.length != 0) {
			for (i = 0; i < fname.length; i++) {
				if (!reg.test(fname)) {
					alert("用户名错误：请输入字母或数字");
					return false;
				}
			}
			if (fname.length < 4 || fname.length > 16) {
				alert("用户名错误：用户名在 4-16 个字符之间");
				return false;
			}
		}
		else {
			alert("用户名错误：用户名为空");
			document.myform.username.focus();
			return false;
		}
		return true;
	}

	function CheckPassWord() { //验证密码
		var userpass = document.myform.password.value;
		if (userpass == "") {
			alert("密码错误：密码为空 \n" + "请输入密码");
			document.myform.password.focus();
			return false;
		}
		if (userpass.length < 4 || userpass.length > 12) {
			alert("密码错误：密码在 4-12 个字符之间\n");
			return false;
		}
		return true;
	}

	function validateform() {
		if (CheckUserName() && CheckPassWord())
			return true;
		else
			return false;
	}

</SCRIPT>
</head>
	<body>
		<img src="../img/login_bg.jpg" class="bg">
		<br><br><br><br><br>
		<div id="center">
			<h1>
				智能图书馆物联网系统
			</h1>
			<hr>
			<form name="myform" onSubmit="return validateform()" enctype="multipart/form-data" action="/cgi-bin/library_cgi/login.cgi" method="post" >
				<!-- 用户名输入框 -->
				<div class="input-group">
					<h3>用户名：</h3>&nbsp;
					<input class="form-control" id="username" name="username" type="text"  style="height:40px" value="" placeholder="输入字母或数字，4-16个字符"/>
				</div>
				<!-- 密码输入框 -->
				<div class="input-group">
					<h3>密&nbsp;&nbsp;&nbsp;&nbsp;码：</h3>&nbsp;
					<input class="form-control" id="password" name="password" type="password" style="height:40px"  value="" placeholder="密码长度4-12位"/>
				</div>
				<!-- 按钮 -->
				<div id="btn" style="padding: 20px;">
					<!-- 注册按钮 -->
					<a href="register.html">
						<INPUT class="btn btn-primary" name="registerButton" id="Button" type="button" value="注册">
					</a>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<!-- 登录按钮 -->
					<INPUT class="btn btn-primary" name="loginButton" type="submit" id="Button" value="登录"  onclick="CheckUserName()">
				</div>
			</form>
		</div>
	</body>
</html>
